<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>筛选页</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
      body{background:#FFF;}
      .filterDiv{
        padding:0 7%;
        padding-top:1.7rem;
      }
      .filterDiv .f-block{
        margin-top:0.9rem;
      }
      .filterDiv .f-block h3{
        font-size:0.32rem;
        font-weight:normal;
        color:#5b5b5b;
        height:0.5rem;
        line-height:0.5rem;
        overflow:hidden;
      }
      .filterDiv .f-block h3 i{
        font-style:normal;
        font-size:0.22rem;
        float:right;
        color:#c8c8c8;
      }
      .filterDiv .f-block div a{
        margin-top:0.3rem;
        float:left;
        background:#F5F5F5;
        margin-right:0.3rem;
        width:calc((100% - 0.9rem) / 4);
        text-align:center;
        height:0.6rem;
        line-height:0.6rem;
        color:#9A9A9A;
        border-radius:0.25rem;
        font-size:0.27rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
      }
      .filterDiv .f-block div a:nth-child(4n){
        margin-right:0;
      }
      .filterDiv .f-block div a.hover{
        background:#FF3126;
        color:#FFF;
      }
      .filterTitle{
        font-size:0.49rem;
        font-weight:400;
        height:0.5rem;
        line-height:0.5rem;
      }
      .condition{
        height:0.42rem;
        line-height:0.42rem;
        color:#9D9D9D;
        font-size:0.27rem;
        margin-top:0.2rem;
      }
      .condition img{
        width:0.4rem;
        height:0.4rem;
        vertical-align: middle;
        margin-top:-0.07rem;
        margin-right:0.2rem;
      }
      .close{
        float:right;
        width:0.34rem;
        height:0.34rem;
        margin-top:0.07rem;
      }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div class="filterDiv">
            <h3 class="filterTitle">筛选 <img src="../../../image/icons/close.png" class="close" @click="close" /></h3>
            <div class="f-block">
                <h3>排序</h3>
                <div class="clearfix">
                    <a class='ellipsi' v-for="(item,i) in sorts" :key="i" :class="sortIndex==i?'hover':''" @click="sortIndex=i;">{{item.name}}</a>
                </div>
            </div>
			<div class="f-block" v-if="categorys != null && categorys.length > 0">
			    <h3>分类筛选</h3>
			    <div class="clearfix">
			        <a @click="changeCategory(0)" class='ellipsi' :class="{hover: categoryId == 0}">所有</a>
					<a @click="changeCategory(item.id)" class='ellipsi' :class="{hover: categoryId == item.id}" v-for="(item, index) in categorys">{{item.name}}</a>
			    </div>
			</div>
            <div class="f-block" @click="if(canAccept=='true'){canAccept='false'}else{canAccept='true'}">
                <h3>条件</h3>
                <p class="condition">
                    <img src="../../../image/icons/checkbox_hover.png" v-if="canAccept=='true'"/>
                    <img src="../../../image/icons/checkbox.png" v-else />
                    只展示当前等级能接的任务
                </p>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
                    sortIndex: $.prefs.getItem('sortIndex') || 0,
                    canAccept: $.prefs.getItem('canAccept') || false,
                    sorts:[
                        {id:1,name:'综合',sort:'default'},
                        {id:2,name:'最新',sort:'time'},
                        {id:3,name:'数量',sort:'qty'},
                        {id:4,name:'佣金',sort:'amount'},
                    ],
                    categorys: JSON.parse($.prefs.getItem('categorys')) || [],
                    categoryId: $.prefs.getItem('categoryId') || 0
                },
                methods:{
                    changeCategory: function(id){
                        this.categoryId = id;
                    },
                    close: function(){
                        var that = this;
                        if(that.sortIndex.toString()!=$.prefs.getItem('sortIndex') 
                            || that.canAccept.toString()!=$.prefs.getItem('canAccept') 
                            || that.categoryId != $.prefs.getItem('categoryId')
                            ){
                            $.prefs.setItem('sortIndex',that.sortIndex.toString());
                            $.prefs.setItem('canAccept',that.canAccept.toString());
                            $.prefs.setItem('categoryId',that.categoryId);

                            api.sendEvent({
                                name: 'filter',
                                extra: {
                                    sorts: that.sorts[that.sortIndex].sort,
                                    canAccept: that.canAccept,
                                    categoryId: that.categoryId
                                }
                            });
                        }

                        api.closeWin({
                            animation:{
                                type:"reveal",
                                subType:"from_top",
                            }
                        });
                    }
                },
                mounted(){
                    $.initJs(this);
                }
            });
        }
    </script>
</body>
</html>
